<template>
  <!-- 集成表 -->
  <el-dialog :title="title" :visible.sync="visible" width="1600px" top="5vh" append-to-body  :before-close="handleDialogClose">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="主键ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入表名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table border v-loading="loading" @row-click="clickRow" ref="table" :data="tableList" @selection-change="handleSelectionChange" height="500px" :row-class-name="tabRowClassName">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          v-for="param in cols"
          :prop="param.prop"
          :label="param.label" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { previewTable,getColumns } from "@/api/datafactory/table";
export default {
  data() {
    return {
      loading:false,
      // 遮罩层
      visible: false,
      // 选中数组值
      tables: [],
      // 总条数
      total: 0,
      // 表数据
      tableList: [],
      title: '',
      // 查询参数
      queryParams: {
        tableId: 0,
        tableName: null,
        id: null,
        pageNum: 1,
        pageSize: 20
      },
      cols: []
    };
  },
  methods: {
    /** 更改斑马纹 */
    tabRowClassName({row,rowIndex}){
      let index = rowIndex + 1;
      if(index %2 == 0){
        return 'two-color'
      }else {
        return "one-color"
      }
    },
    // 显示弹框
    show(row) {
      this.title = row.busTableComment;
      this.queryParams.tableName = row.busTableName;
      this.queryParams.tableId = row.tableId;
      this.queryColumns();
      this.getList();
      this.visible = true;
    },
    // 窗口右上角关闭按钮
    handleDialogClose(){
      this.cols=[];
      this.visible=false;
    },
    // 关闭按钮
    cancel(){
      this.cols=[];
      this.visible=false;
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.tables = selection.map(item => item.tableName);
    },
    //查询表字段
    queryColumns(){
      getColumns(this.queryParams.tableId).then(res=>{
        let columns = res.data;
        for(let i=0; i<columns.length; i++){
          let column = columns[i];
          this.addCol(column.columnName,column.columnComment);
        }
      })
    },

    // 查询表数据
    getList() {
      this.loading = true;
      previewTable(this.queryParams).then(res => {
        if(res.code === 200) {
          this.tableList = res.rows;
          this.total = res.total;
          this.loading = false;

        }
      });
    },
    addCol(prop,label){
      this.cols.push({prop: prop, label: label})
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

  }
};
</script>
